<!--
 * @Author: 曹捷
 * @Date: 2020-12-01 20:35:52
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-22 10:13:30
 * @Description: 二级分类滚动定位
 菜单
 分类组件
 支持上下结构和左右结构
-->
<template>
  <view class="VerticalBox" :class="{'VerticalRow':type !== 'clumn'}">
    <scroll-view v-if="type === 'clumn'" scroll-anchoring class="VerticalNav nav" scroll-y :scroll-with-animation="isAnimation"
      :scroll-top="verticalNavTop">
      <view class="cu-item needsclick" :class="index==tabCur?'text-orange cur':''" v-for="(item,index) in dataList"
        :key="index" @tap="TabSelect" :data-id="index">
        {{item[nameKey]}}
      </view>
    </scroll-view>
    <scroll-view v-else scroll-anchoring class="rowNav" scroll-x :scroll-with-animation="isAnimation" :scroll-left="verticalNavTop">
      <div class="row-coentent">
        <view class="cu-item needsclick" :id="'rownav'+index" :class="index==tabCur?'text-orange cur':''"
          v-for="(item,index) in dataList" :key="index" @tap="TabSelect" :data-id="index">
          {{item[nameKey]}}
        </view>
      </div>
    </scroll-view>
    <scroll-view class="VerticalMain" :class="{'main-scroll':type !== 'clumn'}" scroll-y :scroll-with-animation="isAnimation"
      :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
      <view class="padding-top padding-lr" v-for="(item,index) in dataList" :key="index" :id="'main-'+index">
        <view class="cu-bar solid-bottom bg-white ">
          <span class="spint"></span>
          <text class="cuIcon-title text-orange ">
            {{item[nameKey]}}
          </text>
        </view>
        <view class="cu-list menu-avatar">
          <view class="cu-item" v-for="(food,cindex) in item.children" :key="`addc-${index}-${cindex}`">
            <slot :row="food" :id="`add-${index}-${cindex}`"></slot>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    type: {
      type: String,
      default: 'clumn'
    }
  },
  watch: {
    dataList () {
      this.sysnScrollList()
    }
  },
  data () {
    return {
      tabCur: 0,
      mainCur: 0,
      verticalNavTop: 0,
      scrollList: [],
      load: true,
      isAnimation: true,
      //tab锁 选择左侧的菜单  禁止滚动的时候触发左侧选择状态的变更
      tabClickLock: false,
      // 滚动节流  其实也可以不用 
      throttle: (i) => {
        let dataList = this.scrollList
        if (this.type === 'clumn') {
          this.verticalNavTop = (dataList[i].id - 1) * 50
        } else {
          let dom = document.getElementById("rownav" + i)
          this.verticalNavTop = dom.offsetLeft - 10
          // uni.createSelectorQuery().select("#rownav" + i).boundingClientRect(data => {
          //   this.verticalNavTop = data.left + (i * uni.upx2px(64)) + 10
          // }).exec();
        }
        // tab锁 是否修改tab选中状态
        if (!this.tabClickLock) {
          this.tabCur = dataList[i].id
        }
      },
      // 函数防抖 ，会在右侧滚动效果最后一次结束之后的200ms内 将tab锁解除
      debounce: this.$util.util.debounce((i) => {
        // this.mainCur = this.scrollList[i].id
        this.tabClickLock = false
      }, 0)
    }
  },
  methods: {
    sysnScrollList () {
      this.scrollList = this.dataList
      this.scrollList.forEach((element, index) => {
        element.id = index
      });
    },
    TabSelect (e) {
      this.tabClickLock = true
      this.tabCur = e.currentTarget.dataset.id
      if (this.mainCur == e.currentTarget.dataset.id) {
        this.mainCur = -1;
        this.$nextTick(() => {
          this.mainCur = e.currentTarget.dataset.id
        })
      } else {
        this.$nextTick(() => {
          if (this.type === 'clumn') {
            // setTimeout(() => {
              this.mainCur = e.currentTarget.dataset.id
            // },0)
          }else{
            this.mainCur = e.currentTarget.dataset.id
          }
        })
      }

      if (this.type === 'clumn') {
        this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
      }
    },
    VerticalMain (e) {
      let that = this;
      let tabHeight = 0;
      let dataList = this.scrollList
      if (this.load) {
        for (let i = 0; i < dataList.length; i++) {
          let view = uni.createSelectorQuery().select("#main-" + dataList[i].id);
          view.fields({
            size: true
          }, data => {
            dataList[i].top = tabHeight;
            tabHeight = tabHeight + data.height;
            dataList[i].bottom = tabHeight;
          }).exec();
        }
        this.load = false
      }
      let scrollTop = e.detail.scrollTop + 10;
      for (let i = 0; i < dataList.length; i++) {
        if (scrollTop > dataList[i].top && scrollTop < dataList[i].bottom) {
          this.throttle(i)
          this.debounce(i)
          return false
        }
      }
    }
  },
  mounted () {
    this.sysnScrollList()
  }

}
</script>

<style lang="scss" :scoped="false">
.VerticalBox {
  height: 100%;
  display: flex;
  width: 100%;

  .cu-bar {
    // height: 100rpx;
    // line-height: 100rpx;
    color: #333;
    font-size: 34rpx;
    .spint {
      width: 16rpx;
      height: 16rpx;
      border-radius: 20rpx;
      //background: #f37b1d;
      display: inline-block;
      //margin-left: 32rpx;
      margin-right: 18rpx;
    }
  }
  .VerticalNav.nav {
    min-width: 200rpx;
    width: 16%;
    color: #333;
    white-space: initial;
    font-family: 'PingFangSC-Medium';
    background-color: #f7f7f7;
    font-size: 30rpx;
    .cu-item {
      width: 100%;
      text-align: center;
      background-color: #f7f7f7;
      margin: 0;
      border: none;
      min-height: 100rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cu-item.cur {
      background-color: #fff;
      color: #ffa100;
    }
    .cu-item.cur::after {
      content: '';
      width: 8upx;
      height: 30upx;
      //border-radius: 10upx 0 0 10upx;
      position: absolute;
      background-color: #ff9800;
      top: 0;
      right: 0upx;
      bottom: 0;
      margin: auto;
    }
  }
  .rowNav {
    height: 100rpx;
    width: 100%;
    .cu-item {
      width: auto;
      display: inline-block;
      margin-right: 64rpx;
      height: 48rpx;
      white-space: nowrap;
    }
    .text-orange {
      background: #ffa100;
      color: #fff;
      padding: 0rpx 24rpx;
      border-radius: 100rpx;
    }
    .row-coentent {
      display: flex;
      flex-wrap: nowrap;
      height: 100%;
      align-items: center;
      float: left;
      padding-left: 20rpx;
    }
  }
  .VerticalMain {
    background-color: #fff;
    flex: 1;
  }
  .main-scroll {
    height: calc(100% - 100rpx);
  }
  .cu-list.menu-avatar > .cu-item .content {
    width: calc(100% - 120upx);
  }
  .cu-list.menu-avatar > .cu-item {
    // height: 100px;
  }
}
.VerticalRow {
  flex-direction: column;
}
</style>